<button mat-button [routerLink]="'..'"><i class="fas fa-chevron-left"></i> Extrinsics</button>

<h1>Extrinsic</h1>

<ng-container *ngIf="(extrinsic | async) as extrinsic; else loadingOrError">
  <ng-container *ngIf="(networkProperties | async) as props">

    <h2>{{extrinsic.blockNumber + '-' + extrinsic.extrinsicIdx}}</h2>

    <table class="detail-table">
      <tbody>
      <tr>
        <td class="detail-table--label-cell">Block</td>
        <td><a [routerLink]="'../../block/' + extrinsic.blockNumber">{{extrinsic.blockNumber}}</a></td>
      </tr>

      <tr>
        <td class="detail-table--label-cell">Timestamp</td>
        <td>{{extrinsic.blockDatetime | date: 'dd-MM-yyyy HH:mm:ss'}}</td>
      </tr>

      <tr>
        <td class="detail-table--label-cell">Timestamp UTC</td>
        <td>{{extrinsic.blockDatetime | date:'dd-MM-yyyy HH:mm:ss' :'UTC'}}</td>
      </tr>

      <tr>
        <td class="detail-table--label-cell">Extrinsic Index</td>
        <td>{{extrinsic.extrinsicIdx}}</td>
      </tr>

      <tr>
        <td class="detail-table--label-cell">Extrinsic Hash</td>
        <td>{{extrinsic.hash}}</td>
      </tr>

      <tr>
        <td class="detail-table--label-cell">Pallet</td>
        <td><a [routerLink]="'../../runtime/' + extrinsic.specName + '-' + extrinsic.specVersion + '/pallet/' + extrinsic.callModule">{{extrinsic.callModule}}</a></td>
      </tr>

      <tr>
        <td class="detail-table--label-cell">Call name</td>
        <td><a [routerLink]="'../../runtime/' + extrinsic.specName + '-' + extrinsic.specVersion + '/pallet/' + extrinsic.callModule + '/call/' + extrinsic.callName">{{extrinsic.callName}}</a></td>
      </tr>

      <tr>
        <td class="detail-table--label-cell">Runtime</td>
        <td><a [routerLink]="'../../runtime/' + extrinsic.specName + '-' + extrinsic.specVersion">{{extrinsic.specName + '-' + extrinsic.specVersion}}</a></td>
      </tr>

      <tr>
        <td class="detail-table--label-cell">Address</td>
        <td>
          <account-id *ngIf="extrinsic.multiAddressAccountId" [address]="extrinsic.multiAddressAccountId"
                      [iconSize]="16" [iconTheme]="props.iconTheme" [ss58Prefix]="props.ss58Format"></account-id>
        </td>
      </tr>

      <tr>
        <td class="detail-table--label-cell">Nonce</td>
        <td>{{extrinsic.nonce}}</td>
      </tr>

      <tr>
        <td class="detail-table--label-cell">Signature</td>
        <td class="break-word">{{extrinsic.signature}}</td>
      </tr>

      <tr *ngIf="(callArguments | async) as arguments">
        <td class="detail-table--label-cell">Call Arguments</td>
        <td>
          <attributes [attributes]="arguments" [iconTheme]="props.iconTheme" [iconSize]="24"
                      [tokenDecimals]="props.tokenDecimals" [tokenSymbol]="props.tokenSymbol"
                      [ss58Prefix]="props.ss58Format"></attributes>
        </td>
      </tr>

      </tbody>
    </table>


    <mat-divider></mat-divider>

    <mat-tab-group dynamicHeight animationDuration="0ms">
      <mat-tab label="Events">

        <mat-toolbar>
          <button mat-stroked-button [routerLink]="'../../event'" [queryParams]="{'blockRangeBegin': extrinsic.blockNumber, 'blockRangeEnd': extrinsic.blockNumber}">Show all</button>
        </mat-toolbar>

        <table mat-table [dataSource]="events" [trackBy]="trackEvent" class="mat-table--full-width">

          <ng-container matColumnDef="eventId">
            <th mat-header-cell *matHeaderCellDef>Event ID</th>
            <td mat-cell *matCellDef="let event">
              <a [routerLink]="'../../event/' + event.blockNumber + '-' + event.eventIdx">{{event.blockNumber + '-' + event.eventIdx}}</a>
            </td>
          </ng-container>

          <ng-container matColumnDef="pallet">
            <th mat-header-cell *matHeaderCellDef>Pallet</th>
            <td mat-cell *matCellDef="let event">
              {{event.eventModule}}
            </td>
          </ng-container>

          <ng-container matColumnDef="event">
            <th mat-header-cell *matHeaderCellDef>Event Name</th>
            <td mat-cell *matCellDef="let event">
              {{event.eventName}}
            </td>
          </ng-container>

          <ng-container matColumnDef="details">
            <th mat-header-cell *matHeaderCellDef class="mat-cell--details-link-cell"></th>
            <td mat-cell *matCellDef="let event">
              <a [routerLink]="'../../event/' + event.blockNumber + '-' + event.eventIdx"><span class="material-icons">chevron_right</span></a>
            </td>
          </ng-container>

          <tr mat-header-row *matHeaderRowDef="visibleColumns; sticky: true"></tr>
          <tr mat-row *matRowDef="let myRowData; columns: visibleColumns"></tr>

        </table>

        <ng-container *ngIf="(fetchEventsStatus | async) as status">
          <p *ngIf="status === 'loading'">Loading...</p>
          <p *ngIf="status === 'error'">Could not fetch extrinsic events.</p>
        </ng-container>

      </mat-tab>
    </mat-tab-group>
  </ng-container>
</ng-container>

<ng-template #loadingOrError>
  <ng-container *ngIf="(fetchExtrinsicStatus | async) as status">
    <p *ngIf="status === 'loading'">Loading...</p>
    <p *ngIf="status === 'error'">Could not fetch extrinsic.</p>
  </ng-container>
</ng-template>
